<template>
	<view class="box">
		<!-- 占用空间 -->
		<view class="vh_top_bg"></view><!-- 占用空间 -->

		<view class="search_box">
			<view class="flex_box aic">
				<view class="re mr20 fs0" @tap="back">
					<image  :lazy-load="true" src="/static/icon_arrow_7.png" class="img6"></image>
				</view>
				<view class="re item">
					<image  :lazy-load="true" src="/static/icon_search.png" class="icon_search_pos"></image> <input type="text"
						class="ipt_search" v-model="keyword" placeholder="请输入您想搜索的配件名称或型号" @confirm='searchConfirm'
						placeholder-style="color: #353535" />
				</view>
				<view class="pl20 fs26 cor_fff" @tap="searchClick();">搜索</view>
				<view class="pl20 df aic fs26 cor_fff" @click="screenShow();">
					<view>筛选</view>
					<image  :lazy-load="true" src="/static/icon_screen_2.png" class="ml5 img5"></image>
				</view>
			</view>
		</view>


		<view class="pl15 pr15 pb25 menu_content_box_page">
			<view v-for="(item, index) in partLists" :key="index" @tap="toPartDetail(item.id)">
				<view class="mt15 area_block_3">
					<view class="flex_box">
						<view class="re mr25">
							<image  :lazy-load="true" :src="item.imgUrl" class="img17 vt"></image>
						</view>
						<view class="item">
							<view class="df fldc jcsb hp100">
								<view class="fs28 lh</image> l">{{item.name}}</view>
								<view class="fs24 cor_808" v-if="item.disStr">距离{{item.disStr}}</view>
								<view class="flex_box aic">
									<view class="item">
										<view class="fs30 fwb cor_F23"><text class="fs34">￥{{item.price}}</text>
										</view>
									</view>
									<image  :lazy-load="true" src="/static/icon_location.png" class="img3"></image>
									<view class="ml5 fs24 fwb cor_808">{{item.place}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view><!-- area_block_3 -->


		</view>

		<!-- 筛选弹窗 -->
		<view class="screen_bomb_fix" :class="screenFlag ? 'show' : ''">
			<view class="screen_popup_box_2">
				<view class="pt45 fs28 fwb cor_5D5 tac">筛选</view>
				<view class="pl30 mt50 fs26 fwb cor_5D5">挖机品牌</view>
				<view class="screen_content_2">
					<view class="df fldr fw pl30">
						<view class="active type_tab" @tap="brandId=0" :class="{'active':0== brandId}">
							不限</view>
						<view class="type_tab" :class="{'active':item.id== brandId}" @tap="brandCheck(item)"
							v-for="(item,index) in filters.brands" :key="index">
							{{item.name}}
						</view>
					</view>
				</view>
				<!-- 按钮 -->
				<view class="screen_bottom_area aic jcc">
					<view class="reset_btn" @tap="brandId=0">重置</view>
					<view class="ml50 determine_btn" @click="searchConfirm('click');" style="margin-left: 82rpx;">确定
					</view>
				</view><!-- 按钮 -->
			</view>
			<view class="mask_bg" @click="screenHide();"></view>
		</view>

	</view>

</template>

<script>
	import {
		toast,
		showLoading,
		hideLoading
	} from '@/utils/toast.js';
	import {
		compMainPageApi,
		getMainFilterApi,
		getUserInfoApi
	} from '@/http/api.js';
	export default {
		data() {
			return {
				keyword: '',
				brandId: 0,
				screenFlag: false, //false代表筛选弹窗关闭着
				partLists: [],
				currentPage: 1,
				totalPage: 0,
				hasNextPage: false,
				pageSize: 20,
				filters: {
					types: [{
						"id": 1,
						"name": "履带式"
					}],
					weights: [{
						"id": 1,
						"name": "小挖（6吨以下）"
					}],
					brands: [{
						"id": 1,
						"name": "卡特彼勒"
					}]
				},
				longitude: '',
				latitude: ''
			}
		},
		onShow() {
			if (!uni.getStorageSync('userId')) {
				uni.navigateBack({
					delta: 1
				})
			}
			this.getUserInfo();
		},
		onLoad() {
			this.loadData();
			this.getMainFilter();
		},
		onReachBottom() {
			if (!this.hasNextPage) {
				toast('暂无更多配件信息')
				return;
			}
			this.loadData();
		},
		onBackPress(options) {
			uni.redirectTo({
				url: '/pages/index/index'
			})
			return true;
		},
		methods: {
			getUserInfo() {
				let that = this;
				getUserInfoApi({
					userId: uni.getStorageSync('userId')
				}).then(res => {
					if (!res.data.beCompleteInfo) {
						uni.navigateTo({
							url: '/pages/personal_information/personal_information'
						})
					}
				}).catch(err => {})
			},
			getMainFilter() {
				var that = this;
				showLoading();
				getMainFilterApi({

				}).then(res => {
					that.filters = res.data;
					hideLoading();
				}).catch(err => {
					hideLoading();
				})
			},
			loadData: function(params) {
				let that = this;
				showLoading('加载中');
				if (JSON.stringify(params) !== '{}') {
					that.partLists = [];
				}
				params = Object.assign({
					pageIndex: this.currentPage,
					pageSize: this.pageSize
				}, params);
				compMainPageApi(params).then(res => {

					that.currentPage = res.data.currentPage
					that.hasNextPage = res.data.hasNextPage
					if (res.data.hasNextPage) {
						that.currentPage = that.currentPage + 1
					}

					if (res.data.data.length > 0) {
						that.partLists = that.partLists.concat(res.data.data || [])
					}

					console.log(that.partLists)
					hideLoading();
				}).catch(err => {
					console.log(err)
					hideLoading();
					toast(err.msg)
				})
			},
			brandCheck(item) {
				console.log(item)
				this.brandId = item.id;
			},
			toPartDetail(id) {
				uni.navigateTo({


					url: '/pages/sales_details_of_accessories/sales_details_of_accessories?id=' + id
				})
			},

			searchClick() {
				let that = this;
				var params = {};
				params.name = this.keyword;
				uni.showModal({
					title: '搜索附近',
					content: '是否需要搜索附近的配件，定位后能搜索到离你最近的配件，是否需要定位',
					success: function(res) {
						if (res.confirm) {
							console.log('是');
							uni.getLocation({
								type: 'gcj02',
								success: function(res) {
									params.longitude = res.longitude;
									params.latitude = res.latitude;
									that.longitude = res.longitude;
									that.latitude = res.latitude;
									that.loadData(params);
								}
							});
						} else if (res.cancel) {
							console.log('否');
							that.longitude = '';
							that.latitude = '';
							that.loadData(params);
						}
					}
				});


			},

			searchConfirm(e) {
				console.log(this.keyword)
				console.log(e)
				this.screenHide();
				var params = {};
				if (e != 'click') {
					// if (e.detail.value == '') {
					// 	toast('请输入搜索关键词');
					// 	return;
					// }
					params.name = e.detail.value;
					this.keyword = e.detail.value;
				}
				if (this.brandId) {
					params.brandId = this.brandId;
					if (this.keyword) {
						params.name = this.keyword;
					}
				}
				if (this.latitude && this.longitude) {
					params.latitude = this.latitude;
					params.longitude = this.longitude;
				}
				console.log(params)
				// if (JSON.stringify(params) === '{}') {
				// 	return;
				// }
				this.loadData(params);
			},
			screenShow: function() { //筛选弹窗-打开
				this.screenFlag = true
			},
			screenHide: function() { //筛选弹窗-关闭
				this.screenFlag = false
			},
			
			back() {
				uni.redirectTo({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #f7f6f6;
	}

	.vh_top_bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 65rpx;
		background: linear-gradient(90deg, #F44E34 0%, #E00C09 100%);
		z-index: 3;
	}

	.search_box {
		position: fixed;
		top: 65rpx;
		left: 0;
		width: 100%;
		padding: 35rpx 24rpx;
		background: linear-gradient(90deg, #F44E34 0%, #E00C09 100%);
		z-index: 3;
	}

	.menu_content_box_page {
		position: relative;
		/* height: calc(100vh - 197rpx); */
		background-color: #f7f6f6;
		padding-top: 197rpx;
	}

	.area_block_1 {
		height: 268rpx;
		background: linear-gradient(90deg, #F44E34 0%, #E00C09 100%);
	}

	.area_block_2 {
		padding: 12rpx 0 50rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.area_block_3 {
		position: relative;
		padding: 20rpx 28rpx 20rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.ipt_search {
		display: inline-block;
		width: 100%;
		padding: 0 15rpx 0 86rpx;
		height: 69rpx;
		line-height: 69rpx;
		font-size: 26rpx;
		text-align: left;
		color: #000;
		background-color: #fff;
		outline: none;
		border: none;
		vertical-align: top;
		border-radius: 35rpx;
	}

	.icon_search_pos {
		position: absolute;
		top: 21rpx;
		left: 44rpx;
		width: 28rpx;
		height: 28rpx;
		z-index: 2;
	}
</style>
